<template>
    <div class="seat" @click="clickSeat">
        <div v-if="seatedPlayer">{{ seatedPlayer.name }}</div>
        <ul v-show="show">
            <li v-show='!seatedPlayer' @click="addAi">添加人机</li>
            <li v-show='seatedPlayer' @click="removePlayer">移除此人</li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import useGameStore from '@/store/game';
import { Player } from '@/types/game/player';
import { ref } from 'vue';
const show = ref(false);
const seatedPlayer = ref<null | Player>(null);
const gameStore = useGameStore();
function clickSeat(e: PointerEvent) {
    show.value = true;
    function close(){
        show.value = false
        this.removeEventListener('pointerleave', close)
    }
    e.currentTarget.addEventListener('pointerleave', close)
}
function addAi() {
    seatedPlayer.value = gameStore.$action.playerManagement.addPlayer();
}
function removePlayer(){
    gameStore.$action.playerManagement.removePlayer(seatedPlayer.value)
    seatedPlayer.value = null;
}
</script>

<style scoped>
.seat {
    height: 40vmin;
    width: 30vmin;
    background-color: gray;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
}

.seat ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1vh;
    inset: 0;
    position: absolute;
}

.seat ul li {
    padding: 1vmin;
    border: gold 0.5vmin solid;
    background-image: linear-gradient(rgba(255, 0, 0, 0.8), rgba(139, 0, 0, 0.5)),
        radial-gradient(yellow, rgb(255, 80, 109));
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    text-shadow: 1px 1px 5px rgb(0, 0, 0, 0.5), -1px -1px 5px rgb(0, 0, 0, 0.5);
}
</style>